<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>相片上传</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<link rel="stylesheet" href="{:ADDON_PUBLIC_PATH}/css/weuix.min.css" />
		<link rel="stylesheet" type="text/css" href="{:ADDON_PUBLIC_PATH}/css/jquery-weui.min.css"/>
		<link rel="stylesheet" type="text/css" href="{:ADDON_PUBLIC_PATH}/css/adinfo.css"/>
		<link rel="stylesheet" type="text/css" href="{:ADDON_PUBLIC_PATH}/css/iconfont1.css"/>
		<link rel="stylesheet" type="text/css" href="{:ADDON_PUBLIC_PATH}/css/Huploadify.css"/>
		<script type="text/javascript" src="{:ADDON_PUBLIC_PATH}/js/zepto.min.js"></script>
		<script type="text/javascript" src="{:ADDON_PUBLIC_PATH}/js/lrz.min.js"></script>
		<script type="text/javascript">
		//静态变量
		var SITE_URL = "{:SITE_URL}";
		var IMG_PATH = "__IMG__";
		var STATIC_PATH = "__STATIC__";
		var WX_APPID = "{$jsapiParams.appId}";
		var	WXJS_TIMESTAMP='{$jsapiParams.timestamp}'; 
		var NONCESTR= '{$jsapiParams.nonceStr}'; 
		var SIGNATURE= '{$jsapiParams.signature}';
	</script>
	<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<script type="text/javascript" src="minify.php?f=__JS__/prefixfree.min.js,__JS__/m/dialog.js,__JS__/m/flipsnap.min.js,__JS__/m/mobile_module.js&v={:SITE_VERSION}"></script>
	</head>
	<body>
			<div class="page-hd">
        <h1 class="page-hd-title">
            上传注意
        </h1>
        <p class="page-hd-desc">需要上传一张原图,白底、红底、蓝底各一张</p>
    </div>
    
  <div class="weui_cells weui_cells_form">
   
                  <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <div class="weui_uploader">
                        <div class="weui_uploader_hd weui_cell">
                            <div class="weui_cell_bd weui_cell_primary">原图</div>
                            <div class="weui_cell_ft"></div>
                        </div>
                        <div class="weui_uploader_bd">
                            <ul class="weui_uploader_files" id='img'>
                              <if condition="$photo">
                             	<li onclick="a($(this))" class="weui_uploader_file weui_uploader_status" style="background-image:url('{$photo.photo_url}')"><div class="weui_uploader_status_content"><i class="weui_icon_cancel"></i></div></li>
                              </if>
                            </ul>
                            <div class="weui_uploader_input_wrp">
                                <input class="weui_uploader_input" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" id="headimgurl" />
                                <input  type="hidden"  id="headimgurl1" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>  
           <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <div class="weui_uploader">
                        <div class="weui_uploader_hd weui_cell">
                            <div class="weui_cell_bd weui_cell_primary">红白蓝</div>
                            <div class="weui_cell_ft"></div>
                        </div>
                        <div class="weui_uploader_bd">
                            <ul class="weui_uploader_files" id='img2'>
                            
                              <if condition="$electron">
                              	<volist id="electron" name="electron">
                             	<li onclick="b({$electron.id})" id="photo{$electron.id}" class="weui_uploader_file weui_uploader_status" style="background-image:url('{$electron.path}')"><div class="weui_uploader_status_content"><i class="weui_icon_cancel"></i></div></li>
                              	</volist>
                              </if>
                            </ul>
                            <div class="weui_uploader_input_wrp" id="file2">
                                <input class="weui_uploader_input" type="file" accept="image/jpg,image/jpeg,image/png,image/gif"  id='headimgurl2' multiple />
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
   
  </div>
			<div class="box">
					<div class="weui_cells">
						<div class="weui_cell">
							<div class="weui_cell_bd weui_cell_primary">
								<p>姓名</p>
							</div>
							<div class="weui_cell_ft">{$udata['username']}</div>
						</div>
						
						<div class="weui_cell">
							<div class="weui_cell_bd weui_cell_primary">
								<p>班级</p>
							</div>
							<div class="weui_cell_ft">{$udata['class']}</div>
						</div>
					</div>
			</div>	
		<a href="{:U('photoIndex',array('aid'=>I('aid')))}" class="weui_btn weui_btn_warn">确认</a>
		<div class="weui-footer" style="margin-top: 60px;">
		  <p class="weui-footer__links">
		    <a href="http://h.eqxiu.com/s/04twlh4V" class="weui-footer__link">微生活工作室</a>|  <a href="{:U('infoReview')}" class="weui-footer__link">意见反馈</a>
		  </p>
		  <a  href="{:U('term_text_cn')}" class="weui-footer__text" style="border-radius: ;">Copyright © 20016-2017</a>
		</div>
	</body>
	<script type="text/javascript">
	function previewImage(file) {
	    var MAXWIDTH = 100;
	    var MAXHEIGHT = 200;
	    if (file.files && file.files[0]) {
	        var reader = new FileReader();
	        reader.onload = function (evt) {         
	            $('#img1').html('<li class="weui_uploader_file" style="background-image:url('+evt.target.result+')"></li>');          
	        };
	        reader.readAsDataURL(file.files[0]);//
	        console.log(file.files[0]);
	    }
	}
	function previewImage1(file) {
	    var MAXWIDTH = 100;
	    var MAXHEIGHT = 200;
	    for(var i=0;i<file.files.length;i++){
	    
	    if (file.files && file.files[i]) {
	        var reader = new FileReader();
	        reader.onload = function (evt) {   
	            $('#img2x').append('<li class="weui_uploader_file" style="background-image:url('+evt.target.result+')"></li>');          
	        };
	        reader.readAsDataURL(file.files[i]);
	    }
	    
	    }
	    
	}
	
	function a(a)
	{

		var delimg=a;
		$.confirm('您确定要删除吗?', '确认删除?', 
			function() 
			{
			delimg.remove();
			},
			function()
			{
				$.toast('取消操作', 'cancel');
			});
	}
	//真实的删除数据库
	function b(a)
	{

		var delimg=$("#photo"+a);
		$.confirm('您确定要删除吗?', '确认删除?', 
			function() 
			{
			$.ajax({url:"{:U('photo_del')}",type: 'POST',data:{id:a},});	
			delimg.remove();
			},
			function()
			{
				$.toast('取消操作', 'cancel');
			});
	}
	$(function(){
       
		 var f = document.querySelector('#headimgurl');
		 f.onchange = function () {
		     lrz(this.files[0],{width:960,fieldName:"file"}).then(function (rst) {
		             var xhr = new XMLHttpRequest();
		             var data = {uid:"{:I('uid')}"}
		             xhr.open('POST', '{:U('upload')}');
					
		             xhr.onload = function () {
		                 if (xhr.status === 200) 
		                 {
			                 var obj = eval('(' + xhr.responseText + ')');
			                 $('#img').html('<li onclick="a($(this))" class="weui_uploader_file weui_uploader_status" style="background-image:url('+obj.src+'?'+Math.random()+')"><div class="weui_uploader_status_content"><i class="weui_icon_cancel"></i></div></li>');
			                 $("#headimgurl1").val(obj.src);
		                 } 
		                 else 
		                 {
		                     // 处理其他情况
		                 }
		             };

		             xhr.onerror = function () {
		                 // 处理错误
		             };

		             xhr.upload.onprogress = function (e) {
		                 // 上传进度
		                 var percentComplete = ((e.loaded / e.total) || 0) * 100;
		  }

		             // 添加参数
		             rst.formData.append('size', rst.fileLen);
		             rst.formData.append('base64', rst.base64);
		             rst.formData.append('uid', "{:I('uid')}");
		             // 触发上传
		             xhr.send(rst.formData);

		             return rst;
		         })

		         .catch(function (err) {
		 		 alert(err);
		         })

		 }



		 //多图上传
		 var f2 = document.querySelector('#headimgurl2');
		 f2.onchange = function (e) {

		 var files = e.target.files;
		 var len = files.length;
		 for (var i=0; i < len; i++) {
		     lrz(files[i],{width:960,fieldName:"file1"}).then(function (rst) {
		             var xhr = new XMLHttpRequest();
		             xhr.open('POST', '{:U('upload1')}');

		             xhr.onload = function () {
		                 if (xhr.status === 200) {
		                 var obj = eval('(' + xhr.responseText + ')');
		                 $('#img2').append('<li onclick="b('+obj.id+')" id="photo'+obj.id+'" class="weui_uploader_file weui_uploader_status" style="background-image:url('+obj.src+')"><div class="weui_uploader_status_content"><i class="weui_icon_cancel"></i></div></li>'); 
		                 $('#file2').append('<input value="'+obj.src+'"  type="hidden"  name="files" />');
		                 } else {
		                     // 处理其他情况
		                 }
		             };

		             xhr.onerror = function () {
		                 // 处理错误
		             };

		             xhr.upload.onprogress = function (e) {
		                 // 上传进度
		                 var percentComplete = ((e.loaded / e.total) || 0) * 100;
		             };

		             // 添加参数
		             rst.formData.append('size', rst.fileLen);
		             rst.formData.append('base64', rst.base64);
		             rst.formData.append('uid', "{:I('uid')}");
		             // 触发上传
		             xhr.send(rst.formData);

		             return rst;
		         })

		         .catch(function (err) {
		 		alert(err);
		         })



		 }//for end
		 }	
	});
    $.WeiPHP.initWxShare({
	    title:"最美档案照——美颜瘦脸",
	    imgUrl:"http://wei.gzpyp.edu.cn/Uploads/Picture/2017-09-02/59aa05c299277.png",
	    desc:"16,17级可支持在线查看,在线打印,修改背景色+美白美颜+冲印裁剪",
	    link: "{:U('index')}",
	})
    </script>
</html>